<template>
  <view>
    <my-message-top :text="'个人信息设置'"></my-message-top>
    <view class="setAvatar">
      <text class="avatar-t1">头像</text>
      <text class="avatar-t2">tips:请点击头像进行更换(当前是默认元素)</text>
      <view class="avatar" @click="changeAvatar()">
        <view v-if="!isShow">
          <image :src="userinfo.avatar" mode=""></image>
        </view>
        <view v-else>
          <image :src="avatar" mode=""></image>
        </view>
      </view>
    </view>
    <view class="name">
      <text>昵称</text>
      <view class="name-box">
        <uni-easyinput v-model="value" placeholder="请输入昵称" @input="input()"></uni-easyinput>
      </view>
      <button size="default" type="default" 
      	style="color:#666666; background-color:#FFDC91;    font-size:22px;font-weight: bold;width: 318rpx;height: 100rpx;" @click="putUser()">提交</button>
    </view>
  </view>
</template>

<script>
  import {mapState} from 'vuex'
  import {setUserDetail} from '../../api/person.js'
  import{mapMutations} from 'vuex'
  export default {
    data() {
      return {
        avatar: '',
        kw: '',
        timer: null,
        isShow: false
      };
    },
    computed: {
      ...mapState('User',['userinfo'])
    },
    methods:{
      ...mapMutations('User',['updateUserInfo']),
      async changeAvatar(){
        this.isShow = true;
        const res = await uni.chooseImage({
        	count: 1, 
        });
        console.log(res[1].tempFilePaths[0],'照片地址');
        this.avatar = res[1].tempFilePaths[0]
      },
      input(e){
        clearTimeout(this.timer)
        this.timer = setTimeout(()=>{
          this.kw = e
          console.log(this.kw);
        },1000)
      },
      async putUser(){
        this.isShow = false;
        const formData = {
              username: this.kw,
              file: this.avatar
            }
            this.updateUserInfo(formData)
            const token = uni.getStorageSync('token')
            console.log(formData);
            const data = await uni.uploadFile({
                url: 'http://www.newbabyya.com/user/updateUserInfo', // 你的后端上传接口  
                filePath: formData.file, // 文件路径  
                name: 'file', // 后端接收的文件字段名，应与后端代码中的字段名一致  
                formData: formData,  
                method: 'post',
                header:{
                       'Authorization': token
                      },
                
            });  
            console.log(data);
            uni.switchTab({
            	url: '/pages/my/my'
            });
            
      }
    }
  }
</script>

<style lang="scss">
.setAvatar{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 50rpx;
  .avatar-t1{
    font-size: 22px;
    font-weight: bold;
    color: #666666;
    margin-bottom: 15rpx;
  }
  .avatar-t2{
    font-size: 13px;
    color: #868686;
    margin-bottom: 10rpx;
  }
  .avatar{
    image{
      width: 318rpx;
      height: 318rpx;
    }
  }
}

.name{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15rpx;
  text{
    font-size: 22px;
    font-weight: bold;
    color: #666666;
    margin-bottom: 20rpx;
  }
  .name-box{
    width: 556rpx;
    height: 112rpx;
  }
.is-hover {
	color: rgba(255, 255, 255, 0.6);
	background-color: #179b16;
	border-color: #179b16;
  }

}

</style>
